<template>
  <div>
    <!-- ! Error client-side rendered virtual DOM 是正常的可以忽略 -->
    <full-page id="fullpage" :options="options">
      <div class="section fp-table active">
        <div class="fp-tableCell relative">
          <img class="img-cover" src="https://www.365gl.com/skin/images/h1.jpg" alt="首页" />
          <img class="img-home__text" src="https://www.365gl.com/skin/images/pay.png" alt />
        </div>
      </div>
      <div class="section">
        <div class="slide">
          <div class="relative h100">
            <img class="img-cover" src="https://www.365gl.com/skin/images/h2.jpg" alt="首页" />
            <div class="slogan-box">
              <div class="text-box">
                <p class="text text_1">每一次青春的胡闹</p>
                <p class="text text_2">都会忘却那些烦忧的日子</p>
                <p class="text text_3">短暂的时光总有些特别的乐趣</p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="relative h100">
            <img class="img-cover" src="https://www.365gl.com/skin/images/h3.jpg" alt="首页" />
            <div class="slogan-box">
              <div class="text-box">
                <p class="text text_1">每一个特别的日子</p>
                <p class="text text_2">都有一份成长的陪伴</p>
                <p class="text text_3">总会让人无比的温暖</p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="relative h100">
            <img class="img-cover" src="https://www.365gl.com/skin/images/h4.jpg" alt="首页" />
            <div class="slogan-box">
              <div class="text-box">
                <p class="text text_1">每一份精心的挑选</p>
                <p class="text text_2">都是最诚挚的真意</p>
                <p class="text text_3">收获的是成功的喜悦</p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="relative h100">
            <img class="img-cover" src="https://www.365gl.com/skin/images/h5.jpg" alt="首页" />
            <div class="slogan-box">
              <div class="text-box">
                <p class="text text_1">每一次临时的决定</p>
                <p class="text text_2">都会有最满意的选择</p>
                <p class="text text_3">享受更轻松的旅程</p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="relative h100">
            <img class="img-cover" src="https://www.365gl.com/skin/images/h6.jpg" alt="首页" />
            <div class="slogan-box">
              <div class="text-box">
                <p class="text text_1">每一天的柴米油盐</p>
                <p class="text text_2">都会成为陪你变老的印迹</p>
                <p class="text text_3">足以珍藏每分每秒</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="relative h100">
          <img class="img-cover" src="https://www.365gl.com/skin/images/index07.jpg" alt />
        </div>
      </div>
      <div class="section">
        <div class="relative h100">
          <img class="img-cover" src="https://www.365gl.com/skin/images/index08.jpg" alt />
          <div class="home-three">
            <a class="title">
              <p class="text text_5">给乐生活</p>
              <p class="text text_4">创新消费服务平台</p>
              <div class="text-sub">
                <div class="text-sub__item">
                  <p class="text text_4">汇集吃喝玩乐、随时畅享</p>
                  <p class="text text_4">精选海量商品、轻松选购</p>
                </div>
                <div class="text-sub__item">
                  <p class="text text_4">生活，不止于此</p>
                  <p class="text text_4">优雅，从未止步</p>
                </div>
              </div>
            </a>
            <div class="index8">
              <img class="img-intro" src="https://www.365gl.com/skin/images/index081.jpg" alt />
              <img class="img-intro" src="https://www.365gl.com/skin/images/index082.jpg" alt />
              <img class="img-intro" src="https://www.365gl.com/skin/images/index083.jpg" alt />
            </div>
          </div>
        </div>
      </div>
      <div class="section fp-table">
        <div class="concat-box">
          <div class="fx1">
            <h3>联系我们</h3>
            <p class="p-text2">您的每一分建议，我们的满分服务</p>
            <el-row>
              <el-col :span="12">
                <div class="concat-info__box">
                  <p class="p-text p-text3">深圳给乐信息科技有限公司</p>
                  <p class="p-text">
                    <em class="fa fa-map-marker"></em>
                    地址：深圳市南山区高新园高新南一道9号中国科技开发院3号楼3A06
                  </p>
                  <p class="p-text">
                    <em class="fa fa-print"></em>
                    服务热线：4000-200-365（工作时间 9:30-18:30）
                  </p>
                  <p class="p-text">
                    <em class="fa fa-phone"></em>
                    电话：0755-25599365（总机）
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="concat-info__input">
                  <el-input placeholder="电话" v-model="inputPhone" clearable></el-input>
                  <el-input placeholder="邮箱" v-model="inputEmail" clearable></el-input>
                  <el-input type="textarea" placeholder="内容" v-model="inputContent" clearable></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <footer class="footer">
            <p>
              Copyright © 2011-2099 深圳给乐信息科技有限公司 版权所有
              <a>粤公网安备 44030502001579号</a>
              <a>粤ICP备16022360号-2</a>
            </p>
            <p>
              友情链接:
              <a>快递查询</a>
              <a>深圳seo优化</a>
              <a>昆明珠江钢琴</a>
              <a>103分类目录</a>
              <a>小五分类目录</a>
              <a>给乐生活</a>
            </p>
          </footer>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
  export default {
    name: 'MyFullPage',
    components: {},
    data() {
      return {
        inputPhone: '',
        inputEmail: '',
        inputContent: '',
        options: {
          licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
          afterLoad: this.afterLoad,
          scrollBar: false,
          menu: '#menu',
          navigation: true,
          anchors: ['page1', 'page2', 'page3', 'page4']
          // sectionsColor: [
          //   '#41b883',
          //   '#ff5f45',
          //   '#0798ec',
          //   '#fec401',
          //   '#1bcee6',
          //   '#ee1a59',
          //   '#2c3e4f',
          //   '#ba5be9',
          //   '#b4b8ab'
          // ]
        }
      }
    },
    methods: {
      afterLoad() {
        console.log('afterLoad')
      }
    }
  }
</script>

<style lang="scss">
  @import url('fullpage.js/dist/fullpage.css');
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: inherit;
  }
  .fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }
  .section.fp-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100vh;
  }
  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .relative {
    position: relative;
  }
  .h100 {
    height: 100%;
  }
  .img-home__text {
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .slogan-box {
    position: absolute;
    z-index: 2;
    width: 550px;
    height: 115px;
    left: 0;
    bottom: 130px;
    color: #fff;
    background: rgba(64, 60, 60, 0.4);
  }
  .text-box {
    display: inline-block;
    height: 100%;
    overflow: hidden;
  }
  .text {
    text-align: left;
    letter-spacing: 2px;
    margin-bottom: 12px;
    &_1 {
      z-index: 10;
      font-weight: 400;
      font-size: 32px;
    }
    &_2 {
      font-weight: 300;
      margin-top: -10px;
      font-size: 16px;
      line-height: 40px;
    }
    &_3 {
      font-weight: 300;
      margin-top: -18px;
      font-size: 16px;
    }
    &_4 {
      font-weight: 300;
      margin-top: -10px;
      font-size: 16px;
    }
    &_5 {
      font-weight: 600;
      margin-top: -10px;
      font-size: 18px;
    }
  }
  .home-three {
    position: absolute;
    top: 13%;
    left: 12%;
    .title {
      position: relative;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #503f2f;
      transition: 0.3s;
      p {
        line-height: 2em;
      }
    }
    .text-sub {
      display: flex;
      justify-content: space-around;
      &__item {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
    .index8 {
      @media (min-width: 768px) {
        width: 19%;
      }

      .img-intro {
        position: relative;
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 3% 0;
        background-position: center;
        background-size: cover;
        transition: 0.3s;
      }
    }
  }

  .concat-box {
    width: 100%;
    height: 100%;
    color: #888;
    background: #1f1f23;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 60px;
    position: relative;
    .fx1 {
      flex: 1;
    }
    .el-textarea__inner,
    .el-input__inner {
      background-color: transparent;
      color: #fff;
    }
    .footer {
      position: sticky;
      bottom: 0;
      color: #888;
      a:hover {
        color: #fff;
      }
    }
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
